<template>
  <view class="fu-field">
    <!-- 左侧内容 -->
    <view 
      v-if="label || $slots.left" 
      class="fu-field__left"
    >
      <slot name="left">
        <text class="fu-field__label">{{ label }}</text>
      </slot>
    </view>
    
    <!-- 中间内容 -->
    <view class="fu-field__body">
      <slot>
        <input
          v-model="fieldValue"
          class="fu-field__input"
          :class="{ 'fu-field__input--disabled': disabled, 'readonly-input': readonly }"
          :placeholder="placeholder"
          :type="type"
          :disabled="disabled"
          :readonly="readonly"
          :maxlength="maxlength"
          :confirm-type="confirmType"
          :password="type === 'password'"
          :adjust-position="adjustPosition"
          @input="onInput"
          @focus="onFocus"
          @blur="onBlur"
          @confirm="onConfirm"
        />
      </slot>
    </view>
    
    <!-- 右侧内容 -->
    <view 
      v-if="$slots.right" 
      class="fu-field__right"
    >
      <slot name="right" />
    </view>
  </view>
</template>

<script>
/**
 * fu-field 输入框组件
 * @description 表单输入组件，支持左右插槽
 * @property {String} label - 输入框左侧文本
 * @property {String} type - 输入框类型，可选值：text/password/number/idcard/digit
 * @property {String} placeholder - 输入框占位文本
 * @property {String, Number} value - 输入框值
 * @property {Boolean} disabled - 是否禁用
 * @property {Boolean} readonly - 是否只读
 * @property {Number, String} maxlength - 最大输入长度，设置为 -1 的时候不限制最大长度
 * @property {String} confirmType - 设置键盘右下角按钮的文字，可选值：send/search/next/go/done
 * @property {Boolean} adjustPosition - 键盘弹起时，是否自动上推页面
 * @slot left - 自定义左侧内容
 * @slot default - 自定义输入框内容
 * @slot right - 自定义右侧内容
 * @event {Function} input - 输入时触发
 * @event {Function} focus - 聚焦时触发
 * @event {Function} blur - 失焦时触发
 * @event {Function} confirm - 点击完成时触发
 */
export default {
  name: 'fu-field',
  props: {
    label: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: [Number, String],
      default: -1
    },
    confirmType: {
      type: String,
      default: 'done'
    },
    adjustPosition: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:value', 'input', 'focus', 'blur', 'confirm'],
  computed: {
    fieldValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('update:value', val)
      }
    }
  },
  methods: {
    onInput(event) {
      const { value } = event.detail
      this.$emit('update:value', value)
      this.$emit('input', value)
    },
    onFocus(event) {
      this.$emit('focus', event)
    },
    onBlur(event) {
      this.$emit('blur', event)
    },
    onConfirm(event) {
      this.$emit('confirm', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-field {
  position: relative;
  display: flex;
  align-items: center;
  padding: 28rpx 32rpx;
  background-color: #fff;
  font-size: 28rpx;
  line-height: 1.5;
  
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2rpx;
    background-color: var(--fu-border-color);
    transform: scaleY(0.5);
  }
  
  &:last-child::after {
    display: none;
  }
  
  &__left {
    flex-shrink: 0;
    margin-right: 32rpx;
  }
  
  &__label {
    color: var(--fu-text-color);
    min-width: 160rpx;
    display: inline-block;
  }
  
  &__body {
    flex: 1;
    overflow: hidden;
  }
  
  &__input {
    height: 40rpx !important;
    line-height: 40rpx !important;
    font-size: 28rpx !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: 100%;
    color: var(--fu-text-color);
    
    &::placeholder {
      font-size: 28rpx;
      color: #c8c9cc !important;
    }
    
    &--disabled {
      color: #c8c9cc !important;
      -webkit-text-fill-color: #c8c9cc !important;
      opacity: 1;
    }
  }
  
  &__right {
    flex-shrink: 0;
    margin-left: 32rpx;
  }

  .readonly-input {
    pointer-events: none; 
  }
}
</style> 